<template>
    <div class="page">
        <div class="pafge-left">
            <div class="left-item" :class="{'left-c': index == type_index}" v-for="(item,index) in type_list" :key="index" @click="onSelect(item, index)">{{ item.name }}
                <el-popover placement="right" :width="80" trigger="hover">
                    <div>
                        <div class="mb-[10px]"><el-button type="primary" @click="resetName(item)">重命名</el-button></div>
                        <div><el-button v-if="item.status == 1" type="warning" @click="onType_hide(item)">隐藏</el-button></div>
                        <div><el-button v-if="item.status == 0" type="success" @click="onType_show(item)">显示</el-button></div>
                    </div>
                    <template #reference>
                        <div class="item-more" @click="onShow(index)">...</div>
                    </template>
                </el-popover>
            </div>
            <div class="left-add">
                <el-button type="primary" :icon="Plus" @click="onAdd">新建文件夹</el-button>    
            </div>
        </div>
        <div class="page-right">
            <el-card class="!border-none" shadow="never">
                <el-button class="mb-[10px]" type="primary" :icon="Plus" @click="onAddFile">新增文件</el-button> 
                <el-table  size="large" v-loading="pager.loading" :data="pager.lists">
                    <el-table-column label="序号" type="index" :index="indexAdd" min-width="100" />
                    <el-table-column label="名称" min-width="120" prop="name" />
                    <el-table-column label="格式" min-width="120" prop="ext" />
                    <el-table-column label="排序" min-width="120" prop="sort" />
                    <el-table-column label="状态" min-width="120" prop="status">
                        <template #default="{row}">
                            <span v-if="row.status == 0">隐藏</span>
                            <span v-if="row.status == 1">显示</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180" fixed="right">
                        <template #default="{row}">
                            <el-link class="link mr-4" type="primary" :underline="false" @click="handleEdit(row)">修改</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-card>
        </div>
        <popup
            ref="popupRef"
            :title="formData.id == 0 ? '新增文件':'修改文件'"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
        >
            <el-form class="popupForm" ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <el-form-item label="文件夹" prop="type_id">
                    <el-select v-model="formData.type_id" placeholder="请选择文件夹">
                        <el-option
                            v-for="item in type_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                
                <el-form-item label="名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入名称" clearable show-word-limit maxlength="30" />
                </el-form-item>
                <el-form-item label="文件" prop="link">
                    <div class="w-80">
						<div>
							<material-picker v-model="formData.link" :limit="1" type="file" />
						</div>
					</div>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <div>
                        <el-input-number v-model="formData.sort" :min="0" :max="9999" />
                        <div class="form-tips">默认为0， 数值越大越排前</div>
                    </div>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup name="fileList">
import { wordType, saveWordType, wordList, saveWord } from '@/api/platformTool'
import { Plus } from '@element-plus/icons-vue'
import feedback from '@/utils/feedback'
import { usePaging } from '@/hooks/usePaging'
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'

const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const queryParams = reactive({
    type_id: ''
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: wordList,
    params: queryParams
})
const indexAdd = (index: number) => {
    const page = pager.page // 当前页码
    const pagesize = pager.size // 每页条数
    return index + 1 + (page - 1) * pagesize
}

const type_list:any = ref([])
const type_index = ref(0)
const getType = async () => {
    const res = await wordType({})
    console.log(res)
    res.map((item:any)=>{
        item.visible = false;
    })
    type_list.value = res;
    queryParams.type_id = res[0].id;
    getLists()
}
getType()

const onSelect = (item:any, index:number) => {
    queryParams.type_id = item.id;
    type_index.value = index;
    resetPage()
}

const onShow = (index:number) => {
    type_list.value[index].visible = !type_list.value[index].visible;
}
const resetName = (item: any) => {
    feedback.prompt('请输入文件夹的名称', '重命名', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
    }).then(async ({ value }) => {
        console.log(value)
        await saveWordType({
            id: item.id,
            name: value,
            status: item.status,
            sort: item.sort
        })
        feedback.msgSuccess('重命名成功')
        getType()
    })
    .catch(() => {

    })
}
const onType_hide = async (item:any) => {
    await feedback.confirm(`确定要隐藏  ${item.name}？`)
    await saveWordType({
        id: item.id,
        name: item.name,
        status: 0,
        sort: item.sort
    })
    feedback.msgSuccess('修改成功')
    getType()
}
const onType_show = async (item:any) => {
    await feedback.confirm(`确定要显示  ${item.name}？`)
    await saveWordType({
        id: item.id,
        name: item.name,
        status: 1,
        sort: item.sort
    })
    feedback.msgSuccess('修改成功')
    getType()
}
const onAdd = () => {
   feedback.prompt('请输入文件夹的名称', '新建文件夹', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputPattern:/^.{0,10}$/,
        inputErrorMessage: '最多10个字',
    }).then(async ({ value }) => {
        console.log(value)
        await saveWordType({
            id: 0,
            name: value,
            status: 1,
            sort: 0
        })
        feedback.msgSuccess('新建成功')
        getType()
    })
    .catch(() => {

    })
}

const onAddFile = () => {
    let obj:any = {
        id: 0,
        type_id: '',
        name: '',
        link: '',
        ext: '',
        sort: '',
        status: 1
    }
    Object.keys(formData).forEach((key) => {
        formData[key] = obj[key]
    })
    popupRef.value?.open()
}
const formData:any = reactive({
    id: 0,
    type_id: '',
    name: '',
    link: '',
    ext: '',
    sort: '',
    status: 1
})
const formRules = {
    type_id: [{ required: true, message: '请选择文件夹', trigger: ['blur']}],
    name: [{ required: true, message: '请输入名称', trigger: ['blur']}],
    link: [{ required: true, message: '请上传文件', trigger: ['blur']}],
}
const handleSubmit = async () => {
    await formRef.value?.validate()
    let type_list = formData.link.split('.')
    formData.ext = type_list[type_list.length - 1]
     console.log(formData)
    await saveWord(formData)
    popupRef.value?.close()
    getLists();
}

const handleEdit = (row:any) => {
    Object.keys(formData).forEach((key) => {
        formData[key] = row[key]
    })
    popupRef.value?.open()
}
</script>
<style lang="scss" scoped>
.page{
    display: flex;
    .pafge-left{
        width: 200px;
        height: 800px;
        margin-right: 20px;
        background: #FFF;
        padding: 10px;
        .left-item{
            position: relative;
            width: 100%;
            line-height: 22px;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: no-wrap;
            border-radius: 4px;
            background: #F5F5F5;
            margin-bottom: 10px;
            padding: 8px 20px 8px 10px;
        }
        .left-c{
            background: #E4EAFF;
        }
        .item-more{
            position: absolute;
            right: 0;
            top: 0;
            padding: 0 10px;
            cursor: pointer;
        }
        .left-add{
            display: flex;
            justify-content: center;
        }
    }
    .page-right{
        flex: 1;
    }
}
::v-deep .el-select{
    width: 100%;
}
//  ::v-deep .el-select {
//         width: 100%;
//     }
</style>